<template>
  <div class="home">
    <div style="background: rgb(13, 157, 240);padding:10px 12px;">
        <div @click="serchpage"
        style="border-radius: 16px;height:34px;background-color:#ffffff;display: flex;align-items: center;line-height:34px;padding:0 10px;">
            <van-icon name="search" color="#455a64" size="24"/>
            <div style="color:#999999;font-size:14px;">请输入查询的疾病症状</div>
        </div>
    </div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :height="195">
      <van-swipe-item
        v-for="(image, index) in images"
        :key="index"
        @click="handleBannerEvent(image.code)"
      >
        <img :src="image.imgurl" alt />
      </van-swipe-item>
    </van-swipe>
    <!--  -->
    <van-grid :column-num="5">
      <van-grid-item
        v-for="(value,index) in gridlist"
        :key="index"
        :to="{ path: 'HomeChildren', query: {code: value.code }}"
      >
        <van-icon :class="[value.icon,'iconfont']" class-prefix="icon" :name="value.icon" />
        <span style="font-size:15px;color:#333333">{{value.text}}</span>
      </van-grid-item>
    </van-grid>
    <!--  -->
    <van-divider :style="{ color: '#0d9df0', borderColor: '#9fd8f9', padding: '0 16px' }">就诊三甲医院推荐</van-divider>
    <!--  -->
    <div class="tj-list" v-for="(item,index) in jzlist" :key="index" @click="handleHospital(item)">
      <div class="left-img">
        <img :src="item.url" alt />
      </div>
      <div class="right-content">
        <ul>
          <li class="yy-name">{{item.name}}</li>
          <li class="yynr">
            <p>地址：{{item.address}}</p>
            <span class="yy-bq">三甲医院</span>
          </li>
        </ul>
      </div>
    </div>
    <!--  -->
    <div style="height: 3rem;"></div>
    <!-- <van-icon class="iconfont icon-xinzang" class-prefix='icon' name='icon-xinzang' /> -->
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
  </div>
</template>
 
<script>
import {
  Swipe,
  SwipeItem,
  Lazyload,
  Grid,
  GridItem,
  Icon,
  Divider,
  Search
} from "vant";
import HelloWorld from "@/components/HelloWorld.vue";
export default {
  name: "Home",
  components: {
    HelloWorld,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Lazyload.name]: Lazyload,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Icon.name]: Icon,
    [Divider.name]: Divider,
    [Search.name]: Search
  },
  props: {},
  data() {
    return {
      images: [
        {
          key: 1,
          imgurl: "http://qqwyfv2fz.hn-bkt.clouddn.com/b1.jpg",
          code: 3314
        },
        {
          key: 2,
          imgurl: "http://qqwyfv2fz.hn-bkt.clouddn.com/b2.jpg",
          code: 102
        },
        {
          key: 3,
          imgurl: "http://qqwyfv2fz.hn-bkt.clouddn.com/b3.jpg",
          code: 2179
        },
        {
          key: 4,
          imgurl: "http://qqwyfv2fz.hn-bkt.clouddn.com/b4.jpg",
          code: 7973
        }
      ],
      gridlist: [
        {
          text: "心脏",
          code: "心脏",
          icon: "icon-xinzang"
        },
        {
          text: "肺",
          code: "肺",
          icon: "icon-fei"
        },
        {
          text: "胃",
          code: "胃",
          icon: "icon-wei"
        },
        {
          text: "腰部",
          code: "腰部",
          icon: "icon-yaobu"
        },
        {
          text: "肝脏",
          text: "肝",
          icon: "icon-ganzang"
        },
        {
          text: "脑",
          code: "颅脑",
          icon: "icon-naoke"
        },
        {
          text: "肠道",
          code: "食管",
          icon: "icon-changdao"
        },
        {
          text: "鼻",
          code: "鼻",
          icon: "icon-bike"
        },
        {
          text: "咽喉",
          code: "咽喉",
          icon: "icon-yanhouke"
        },
        {
          text: "肠道",
          code: "肠",
          icon: "icon-changdao"
        }
      ],
      jzlist: [
        {
          name: "广州军区武汉总医院",
          address: "洪山区",
          url: "http://qqwyfv2fz.hn-bkt.clouddn.com/yy_g.jpg",
          jwd: [114.350912,30.53708],
          phone:"02787169161"
        },
        {
          name: "湖北省妇幼保健院",
          address: "洪山区",
          url: "http://qqwyfv2fz.hn-bkt.clouddn.com/yy_fy.jpg",
          jwd: [114.358572,30.534137],
          phone:"02787169161"
        },
        {
          name: "武汉市儿童医院",
          address: "江岸区",
          url: "http://qqwyfv2fz.hn-bkt.clouddn.com/yy_et.jpg",
          jwd: [114.294232,30.608655],
          phone:"02787169161"
        },
        {
          name: "湖北省肿瘤医院",
          address: "洪山区",
          url: "http://qqwyfv2fz.hn-bkt.clouddn.com/yy_zl.jpg",
          jwd: [114.37116,30.506584],
          phone:"02787169161"
        },
        {
          name: "武汉协和医院",
          address: "江岸区",
          url: "http://qqwyfv2fz.hn-bkt.clouddn.com/yy_xh.jpg",
          jwd: [114.280879,30.589111],
          phone:"02787169161"
        },
        {
          name: "武汉市中心医院",
          address: "江岸区",
          url: "http://qqwyfv2fz.hn-bkt.clouddn.com/yy_zx.jpg",
          jwd: [114.301489,30.586825],
          phone:"02787169161"
        },
        {
          name: "武汉大学中南医院",
          address: "武昌区",
          url: "http://qqwyfv2fz.hn-bkt.clouddn.com/yy_zn.jpg",
          jwd:[114.359069,30.559432],
          phone:"02787169161"
        },
        {
          name: "华中科技大学同济医学院附属同济医院",
          address: "硚口区",
          url: "http://qqwyfv2fz.hn-bkt.clouddn.com/yy_xh.jpg",
          jwd: [114.267206,30.58572],
          phone:"02787169161"
        },
        {
          name: "武钢总医院",
          address: "青山区",
          url: "http://qqwyfv2fz.hn-bkt.clouddn.com/yy_wg.jpg",
          jwd: [114.409726,30.637272],
          phone:"02787169161"
        },
        {
          name: "武汉医疗救治中心",
          address: "东西湖区",
          url: "http://qqwyfv2fz.hn-bkt.clouddn.com/yy_jz.jpg",
          jwd: [114.291009,30.67057],
          phone:"02787169161"
        }
      ]
    };
  },
  created() {
    this.$store.commit("set_bottombar_visible", true);
  },

  methods: {
    handleBannerEvent(code) {  //这是点击banner的跳转内容
      this.$router.push({
        path: "/homebanner",
        query: {
          code
        }
      });
    },
    handleHospital(value) { //点击医院的跳转
      this.$router.push({
        name:"homehospital",
        params: value
      })
    },
    serchpage(){ //点击搜索
      this.$router.push({name:"searchpage"})
    }
  }
};
</script>
<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 195px;
  text-align: center;
  background-color: #39a9ed;
  img {
    width: 100%;
    height: 100%;
  }
}
.iconfont {
  color: #0d9df0;
  font-size: 30px;
}
/deep/ .van-grid-item__content {
  padding: 8px;
}
.tj-list {
  display: flex;
  padding: 10px 12px;
  .left-img {
    width: 38%;
    height: 90px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 6px;
    }
  }
  .right-content {
    width: 62%;
    padding-left: 10px;
    .yynr {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.yy-name {
  font-size: 16px;
}
.yy-bq {
  display: inline-block;
  background-color: #0d9df0;
  color: #ffffff;
  font-size: 14px;
  line-height: 30px;
  padding: 0 10px;
  border-radius: 6px;
}
</style>